<template>
  <div>
    <div>
      <a-form :model="form" :rules="rules" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="充值金额" name="currency_balance">
              <a-input v-model:value="form.currency_balance" placeholder="充值金额" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="支付金额" name="other">
              <a-input v-model:value="form.payment_cash" placeholder="支付金额" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="赠送金额" name="other">
              <a-input v-model:value="form.give_cash" placeholder="赠送金额" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="充值类型" name="other">
              <a-select
                v-model:value="form.recharge_type"
                show-search
                placeholder="充值类型"
                :options="options2"
                @change="handleChange2"
                allowClear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="充值说明" name="other">
              <a-input v-model:value="form.explain" placeholder="充值说明" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="排序" name="other">
              <a-input v-model:value="form.sort" placeholder="排序" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="状态" name="other">
              <a-space direction="vertical">
                <a-switch
                  v-model:checked="form.status"
                  checked-children="开启"
                  un-checked-children="禁用"
                />
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
        <div style="position: relative; bottom: 10px">
          <a-button type="primary" @click="submit">{{ select_title }}</a-button>
        </div>
        <!-- <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="一级分类" name="other">
              <a-select
                v-model:value="form.pid"
                show-search
                placeholder="一级分类"
                :options="options2"
                @change="handleChange2"
                allowClear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="店铺" name="businessId">
              <a-select
                v-model:value="form.businessId"
                show-search
                placeholder="选择店铺"
                :options="options"
                allowClear
                @change="handleChange"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="商品分类描述" name="categoryDesc">
              <a-textarea
                v-model:value="form.categoryDesc"
                placeholder="商品分类描述"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="商品分类图片" name="image">
              <a-upload
                v-model:file-list="fileList"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture"
                name="file"
              >
                <a-button> 上传图片 </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row> -->
      </a-form></div
    >
  </div>
</template>

<script lang="ts" setup>
  import { ref, onBeforeUpdate, onBeforeMount } from 'vue';
  import { Tinymce } from '/@/components/Tinymce/index';
  // import { message } from 'ant-design-vue';

  const form: any = ref({
    currency_balance: '',
    payment_cash: '',
    give_cash: '',
    recharge_type: '',
    channel: '',
    explain: '',
    status: true,
  });

  let $emit = defineEmits(['onReturn']);

  let props = defineProps(['select_type', 'select_title', 'select_data']);

  {
    Tinymce;
  }

  function submit() {
    form.value.status = form.value.status ? 'normal' : 'destroy';
    if (props.select_title == '新增') $emit('onReturn', form.value, '新增');
    else $emit('onReturn', form.value, '编辑');
    // message.success('商品已提交,可以添加数据了');
  }

  const options2: any = ref([]);
  const options: any = ref([
    {
      label: '测试',
      value: '1',
    },
  ]);
  const handleChange = (value: any) => {
    form.value.businessId = value;
    console.log(`selected ${value}`);
  };
  const handleChange2 = (value: any) => {
    form.value.pid = value;
    console.log(`selected ${value}`);
  };

  const fileList = ref([
    {
      uid: '-1',
      name: 'xxx.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
  ]);

  const rules: any = {
    currency_balance: [{ required: true, message: '请输入商品名称' }],
    other: [{ required: false, message: '请输入排序位置' }],
  };
  onBeforeMount(() => {
    if (props.select_title == '编辑') {
      form.value = props.select_data;
    } else {
      form.value = {
        businessId: '',
        categoryDesc: '',
        categoryName: '',
        image: '',
        pid: '',
        status: true,
      };
    }
    options2.value = props.select_type;
  });
  onBeforeUpdate(() => {
    // 检查是否保存过规格

    if (props.select_title == '编辑') {
      form.value = props.select_data;
    } else {
      form.value = {
        businessId: '',
        categoryDesc: '',
        categoryName: '',
        image: '',
        pid: '',
        status: true,
      };
    }
    options2.value = props.select_type;
  });
</script>
<style scoped>
  .skuName {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px;
    animation: fadenum 1s 1;
    background-color: #f1f1f1;
  }

  .skuValue {
    display: flex;
    align-items: center;

    /* justify-content: space-between; */
    width: 100%;
    padding: 5px;
    animation: fadenum 1s 1;
    background-color: #fcfbfb;
  }

  .dynamic-delete-button {
    position: relative;
    top: 4px;
    transition: all 0.3s;
    color: #999;
    font-size: 24px;
    cursor: pointer;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .dynamic-delete-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .skuValue_1 {
    /* padding: 5px 15px;
    background-color: rgb(245 245 245 / 10%);
    box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%); */

    color: white;
  }

  @keyframes fadenum {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .skuName_1 {
    color: #f1f1f1;
  }

  .skuName:hover {
    .skuName_1 {
      padding: 5px 10px;
      border-radius: 50%;
      background-color: rgb(245 245 245 / 10%);
      box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%);
      color: black;
    }
  }

  .skuValue:hover {
    .skuValue_1 {
      padding: 5px 10px;
      border-radius: 50%;
      background-color: rgb(245 245 245 / 10%);
      box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%);
      color: black;
      font-weight: 700;
    }
  }
</style>
